<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>修改用户</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <!--<link href="css/nprogress.css" rel="stylesheet">-->

  <!-- Custom Theme Style -->
  <link href="css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
  <div class="main_container">
    <div id="head">
    </div>

    <!-- top navigation -->

    <!-- /top navigation -->
    <!-- page content -->
    <div class="right_col" role="main">
      <div class="">
        <div class="page-title">
          <div class="title_left">
            <h3 style="color: green;">修改用户</h3>
          </div>

          <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">

            </div>
          </div>
        </div>
        <div class="clearfix"></div>

        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_title">

                <div class="clearfix" style="text-align: center;"><span style="font-size: 25px;color: #000000;">修改用户信息</span></div>
              </div>
              <div class="x_content">

                <form class="form-horizontal form-label-left" novalidate>


                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">用户名 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input id="name" class="form-control col-md-7 col-xs-12"  name="name" placeholder="请填写用户名"  type="text">
                    </div>
                    <label style="color: red;" id="userNameError"></label>
                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="dlname">用户真实姓名 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input id="dlname" class="form-control col-md-7 col-xs-12"  name="dlname" placeholder="请填写用户真实姓名"  type="text">
                    </div>
                    <label style="color: red;" id="dluserNameError"></label>
                  </div>
                  <div class="item form-group" >
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="utype">用户角色 <span class="required">*</span>
                    </label>
                    <div class=" col-xs-9" id="email3" >
                      <select style="padding: 6px " id="utype">
                        <option value="">—请选择—</option>

                      </select>
                      <label style="color: red;" id="utypeError"></label>
                    </div>
                  </div>
                  
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="phone">用户手机号 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="tel" id="phone" name="email" placeholder="请填写用户手机号"  class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="phoneError"></label>
                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">用户邮箱 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="tel" id="email" name="email" placeholder="请填写规范的邮箱名" class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="emailError"></label>
                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="IdCard">用户身份证号码 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="tel" id="IdCard" name="email" placeholder="请填写规范的身份证号码"  class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="IdCardError"></label>
                  </div>
                  <div class="ln_solid"></div>
                  <div class="form-group">
                    <div class="col-md-6 col-md-offset-3">
                      <button id="send" type="button" class="btn btn-success">保存</button>
                      <button type="button" class="btn btn-primary" onclick="window.history.back(-1)">返回</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <!-- /page content -->

            <!-- footer content -->
            <footer>
              <div class="pull-right">
                Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
              </div>
              <div class="clearfix"></div>
            </footer>
            <!-- /footer content -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

        <!-- jQuery -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js"></script>
        <!-- FastClick -->
        <script src="js/fastclick.js"></script>
        <!-- NProgress -->
        <script src="js/nprogress.js"></script>
        <!-- validator -->
        <script src="js/validator.js"></script>
        <!-- Custom Theme Scripts -->

        <!-- validator -->
        <script>
          $(document).ready(function(){
            $("#head").load("head.html");
          });
          // initialize the validator function
          validator.message.date = 'not a real date';

          // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
          $('form')
            .on('blur', 'input[required], input.optional, select.required', validator.checkField)
            .on('change', 'select.required', validator.checkField)
            .on('keypress', 'input[required][pattern]', validator.keypress);

          $('.multi.required').on('keyup blur', 'input', function() {
            validator.checkField.apply($(this).siblings().last()[0]);
          });

          $('form').submit(function(e) {
            e.preventDefault();
            var submit = true;

            // evaluate the form using generic validaing
            if (!validator.checkAll($(this))) {
              submit = false;
            }

            if (submit)
              this.submit();

            return false;
          });
          var $token = window.sessionStorage.getItem('token');
          $.ajax({
              type: "post",
              xhrFields: {withCredentials: true},
              url: "http://localhost:8081/userInfo/userType",
              dataType: "json",
              data: {"token": $token},
              success: function (data) {
                  $.each(data, function (i, depot) {
                      if(depot.id!=10&&depot.id!=1){
                          var $op = '<option value="' + depot.id + '">' + depot.typename + '</option>';
                          $("#utype").append($($op));
                      }
                  })
              },
              error: function () {
                  alert("用户类型加载错误");
              }
          })

          var $url=window.location.href;
          var $id=$url.split("=")[1];
          var $oldusername=null;
          var $oldphone=null;
          var $salId=null;
          var $oldIdCard=null;
          $.ajax({
              type: "post",
              xhrFields: {withCredentials: true},
              url: "http://localhost:8081/userInfo/toUpdate",
              dataType: "json",
              data: {"token": $token,"id":$id},
              success: function (data) {
                 $("#name").val(data.username);
                  $oldusername=data.username;
                  $salId=data.salid;
                  $oldIdCard=data.salesman.sIdcard;
                      $("#dlname").val(data.salesman.sName);
                   $("#utype option").map(function(){
                       if($(this).val()==data.typeid){
                           $(this).attr("selected",true);
                       }
                  })

                $("#email").val(data.salesman.sEmail);
                   $("#phone").val(data.phone);
                  $oldphone=data.phone;
                $("#IdCard").val(data.salesman.sIdcard);
              },
              error: function () {
                  alert("修改用户初始化加载错误");
              }
          })

          // 表单验证开始
          var uPattern = /^[a-zA-Z][a-zA-Z0-9_-]{4,11}$/;
          var pPattern = /^[\w_-]{6,15}$/;
          var udPattern = /^[\u4E00-\u9FA5A-Za-z]+$/;
          var emPattern = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
          var idPattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
          $("#name").bind("blur",_userName1);
          $("#phone").bind("blur",_phone);
          $("#dlname").bind("blur",_dlname);
          $("#utype").bind("change",_typeId);
          $("#email").bind("blur",_email);
          $("#IdCard").bind("blur",_IdCard);
          function _IdCard(){
              var $IdCard = $("#IdCard").val();
              if ($("#IdCard").val().trim()==""){
                  $("#IdCardError").html("身份证不能为空");
                  return false;
              }else if (!(idPattern.test($IdCard))){
                  $("#IdCardError").html("请输入正确的身份证");
                  return false;
              }else {
                  $.ajax({
                      type:"post",
                      xhrFields:{withCredentials:true},
                      url:" http://localhost:8081/userInfo/hasIdCard",
                      dataType:"json",
                      data:{"token": $token,"IdCard":$IdCard,"oldIdCard":$oldIdCard},
                      success:function(data) {
                          if(data.message =="yes"){
                              $("#IdCardError").html("");
                              return true;
                          }else if(data.message =="no"){
                              $("#IdCardError").html("身份证已存在");
                              return false;
                          }
                      },
                      error:function(){
                          alert("错误");
                      }
                  });
              }
          }
          function _email(){
              var $email = $("#email").val();
              if ($("#email").val().trim()==""){
                  $("#emailError").html("邮箱不能为空");
                  return false;
              }else if (!(emPattern.test($email))){
                  $("#emailError").html("请输入正确的邮箱");
                  return false;
              }else {
                  $("#emailError").html("");
                  return true;
              }
          }
          function _typeId(){
              var $typeId = $("#utype").val();
              if ($typeId == ""){
                  $("#utypeError").html("用户类型不能为空");
                  return false;
              }else {
                  $("#utypeError").html("");
                  return true;
              }
          }
          function _dlname(){
              var $udlname = $("#dlname").val();
              if ($("#dlname").val().trim()==""){
                  $("#dluserNameError").html("真实姓名不能为空");
                  return false;
              }else if (!(udPattern.test($udlname))){
                  $("#dluserNameError").html("只能输入中文和英文");
                  return false;
              }else {
                  $("#dluserNameError").html("");
                  return true;
              }
          }
          function _userName1(){
              var $userName = $("#name").val();
              if ($("#name").val().trim()==""){
                  $("#userNameError").html("用户名不能为空");
                  return false;
              }else if (!(uPattern.test($userName))){
                  $("#userNameError").html("请填写正确的用户名");
                  return false;
              }else {
                  $.ajax({
                      type:"post",
                      xhrFields:{withCredentials:true},
                      url:" http://localhost:8081/userInfo/hasUserName",
                      dataType:"json",
                      data:{"token": $token,"userName":$userName,"oldusername":$oldusername},
                      success:function(data) {
                          if(data.message =="yes"){
                              $("#userNameError").html("");
                          }else if(data.message =="no"){
                              $("#userNameError").html("用户名已存在");
                          }
                      },
                      error:function(){
                          alert("错误");
                      }
                  });
                  $("#userNameError").html("");
                  return true;
              }
          }
          function _phone(){
              var $phone = $("#phone").val();
              if ($("#phone").val().trim()==""){
                  $("#phoneError").html("手机号码不能为空");
                  return false;
              }else if (!(/^1[34578]\d{9}$/.test($phone))){
                  $("#phoneError").html("请输入正确的手机号码");
                  return false;
              }else {
                  $.ajax({
                      type:"post",
                      xhrFields:{withCredentials:true},
                      url:" http://localhost:8081/userInfo/hasPhone",
                      dataType:"json",
                      data:{"token": $token,"phone":$phone,"oldPhone":$oldphone},
                      success:function(data) {
                          if(data.message =="yes"){
                              $("#phoneError").html("");
                              return true;
                          }else if(data.message =="no"){
                              $("#phoneError").html("电话已存在");
                              return false;
                          }
                      },
                      error:function(){
                          alert("错误");
                      }
                  });
              }
          }
          $(document).on("click", "#send", function () {
              if(_userName1()==false){
                  return false;
              }else if(_dlname()==false){
                  return false;
              }else if(_typeId()==false){
                  return false;
              }else if(_phone()==false){
                  return false;
              }else if(_email()==false){
                  return false;
              }else if(_IdCard()==false){
                  return false;
              }else {
                  var $uname = $("#name").val();
                  var $udlname = $("#dlname").val();
                  var $typeId = $("#utype").val();
                  var $phone = $("#phone").val();
                  var $email = $("#email").val();
                  var $IdCard = $("#IdCard").val();

                  $.ajax({
                      type: "post",
                      xhrFields: {withCredentials: true},
                      url: "http://localhost:8081/userInfo/updateUser",
                      dataType: "json",
                      data: {
                          "token": $token,
                          "userName": $uname,
                          "typeId": $typeId,
                          "sName": $udlname,
                          "phone": $phone,
                          "email": $email,
                          "idCard": $IdCard,
                          "id":$id,
                          "salId":$salId
                      },
                      success: function (data) {
                          if (data.message == "yes") {
                              window.location.href = "UserInfo.html";
                          } else {
                              alert("修改用户失败")
                          }

                      },
                      error: function () {
                          alert("修改用户错误");
                      }
                  })
              }
          })
        </script>
        <!-- /validator -->
</body>
</html>
